<template>
  <div class="content-div">
    <img class="headImg" :src="dataInfo.img" alt="">
    <div class="base-info-box">
      <div class="base-out bottom-10">
        <span></span>
        <span>{{dataInfo.name}}</span>
      </div>
      <div class="base-out bottom-10">
        <span>陪诊次数：</span>
        <span>{{dataInfo.num}}</span>
      </div>
      <div class="base-out">
        <span>陪诊医院：</span>
        <span>{{dataInfo.hospital}}</span>
      </div>
    </div>
    <div class="base-info-box2">
      <div style="border-color: #11cbc5;" @click="cellPhone">
        <van-icon color="#11cbc5" name="phone" />
        <span>电话咨询</span>
      </div>
      <div>
        <van-icon color="#1989fa" name="comment" />
        <span>在线咨询</span>
      </div>
    </div>
    <div class="base-info-box">
      <div class="detail-head">
        <div></div>
        <span>医院简介</span>
      </div>
      <div ref="detalBox" class="detail-box" :style="{'height': isShowAll ? 'auto' : '300px'}">
        <div ref="detalBox" :style="{'padding-bottom': isShowAll ? '60px' : '0px'}">&emsp;&emsp;{{dataInfo.detail}}</div>
        <div @click="isShowAll=!isShowAll" :style="{'box-shadow': isShowAll ? 'unset' : '0 -20px 30px 20px #FFFFFF'}" class="show-more" v-if="showMore">
          <span>{{isShowAll ? '收起' : '展开阅读全文'}}</span>
          <van-icon v-if="isShowAll" name="arrow-up" />
          <van-icon v-else name="arrow-down" />
        </div>
      </div>
    </div>
    <van-tabs @change="changeTab" class="tab-box" background="#F8F8F8" color="#1989fa" title-active-color="#1989fa" line-width="8px" v-model="tabType">
      <van-tab title="服务项目"></van-tab>
      <van-tab title="陪诊师"></van-tab>
      <van-tab title="用户评价"></van-tab>
    </van-tabs>
    <div v-if="tabType == 0" class="item-list-box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list-item-box3" v-for="(item, index) in list" :key="index">
          <div class="list-head-box">
            <img src="https://hqpz.tanjirj.com/uploads/images/20220811/6a25d0fe368fa9562c73477f11b1fd18.png" alt="" srcset="">
            <div class="list-name-box">
              <span class="list-name">一对一陪护</span>
              <span class="list-name">河南省XXXXXXX医院</span>
              <div class="list-money-box">
                <span style="color: #FF0000;font-weight: bold;">￥<span class="money-text">99.00</span></span>
                <span class="yy-btn">立即预约</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div v-if="tabType == 1" class="item-list-box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div @click="toPage(item)" class="list-item-box2" v-for="(item, index) in list" :key="index">
          <div class="list-head-box">
            <img src="https://hqpz.tanjirj.com//uploads/hospital_img/henanshengertongyiyuan.jpg" alt="" srcset="">
            <div class="list-name-box">
              <span class="list-name">陪诊师</span>
              <div class="list-zz">
                <span style="background-color: rgba(89,89,255,.07);color: #1989fa;">{{ $route.query.type == '2' ? '身份认证' : '陪诊机构'}}</span>
                <span style="background-color: rgba(234,135,68,.07);color: #ea8744;">{{ $route.query.type == '2' ? '资格证书' : '机构认证'}}</span>
              </div>
              <span class="list-name1">埃及和深刻的今安徽省大哥</span>
              <span class="list-name1">盎司的价格哈根上的京哈高速酒哈说过的就</span>
            </div>
          </div>
          <div class="list-addr-box">
            <div>
              <span>陪诊次数：</span>
              <span class="value-text">100</span>
              <span>次</span>
            </div>
            <div>
              <span>陪诊价格：</span>
              <span class="value-text">200.00</span>
              <span>元起</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div v-if="tabType == 2" class="item-list-box">
      <div class="pj-outbox">
        <div class="pj-type-box">
          <span v-for="(item, index) in pjTypeList" :key="index">{{item.name}}</span>
        </div>
        <div class="pj-list-box">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="list-item-box1" v-for="(item, index) in list" :key="index">
              <div class="list-head-box">
                <img src="https://hqpz.tanjirj.com//uploads/hospital_img/henanshengertongyiyuan.jpg" alt="" srcset="">
                <div class="list-name-box">
                  <span class="list-name">xxxxxx医院按计划受到广泛按计划是德国今安徽省大哥</span>
                  <span class="list-type">2023-07-03 17:15</span>
                </div>
                <van-rate v-model="star" readonly />
              </div>
              <div class="list-addr-box">地址地址地址地址地址地址地址地址地址地址地址地址地址地址</div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      tabType: 0,
      isShowAll: true,
      showMore: false,
      loading: false,
      finished: false,
      id: '',
      dataInfo: {
        img: 'https://hqpz.tanjirj.com/uploads/images/20221010/93a6dfb0654140a8b469fdc331254110.jpg',
        name: 'xxxxxx陪诊师',
        sex: '男',
        age: '30',
        hage: '5',
        num: '5',
        phone: '18888888888',
        pev: '80',
        plnum: '10',
        jg: '沈阳市',
        hospital: '沈阳市医大一院/沈阳市盛京医院',
        item: '送取结果/一对一陪护/一对一陪护',
        remark: '个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介',
        address: '地址地址地址地址地址地址地址地址地址地址地址地址地址地址',
        serviceTime: '08:00 - 17:00',
        detail: '郑州市儿童医院始建于1960年，是河南省一家集医疗、科研、教学、预防、康复、保健为一体的三级综合性儿童医院。医院设临床医技科室38个，开放床位1399张，职工2000余人、中高级专业技术人员400余人。医院现有省级医学重点培育学科4个，市级医学重点及重点培育学科6个。拥有两所(郑州市儿科医学研究所、郑州市儿童康复医学研究所)，两站(河南省儿童疾病防治院士工作站、郑州市卫生系统博士后科研工作站)，两室(郑州市儿童血液病重点实验室、郑州市变态反应实验室)，两基地(国际、国家级继续医学教育项目培训基地)和“十大专科诊疗中心”。医院致力打造中原儿童医疗集团，大力建设和发展四个医院，即东区医院、本部医院、西区医院和康复医院，努力把郑州市儿童医院建设成为“省内第一、国内一流、国际知名”的大型现代化儿童医疗保健中心!医院先后获批为全国诚信医院、全国百姓放心示范医院、美国儿科学会中国教育基地、美国世界健康基金会合作单位、国家自然科学基金依托单位、中国红十字基金会“小天使基金”定点医院、“天使阳光基金”定点医院、“中国残联贫困聋儿抢救性康复人工耳蜗项目”手术定点医院、省儿童康复医学中心、省医疗安全管理工作先进单位、省孤残儿童医疗救助定点医院、郑州市特勤儿童重症救治转运中队等。拥有64排CT、德国Stockert体外循环机等一大批国际先进医疗设备。'
      },
      pjTypeList: [
        { id: '1', name: '11111' },
        { id: '1', name: '啊科技时代给' },
        { id: '1', name: '拉克丝' },
        { id: '1', name: '设计的噶啥的' },
        { id: '1', name: '1231232' }
      ],
      star: 5,
      list: []
    }
  },
  created () {},
  methods: {
    changeTab () {
      this.list = []
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    toPage (data) {
      let url = ''
      url = this.tabType == '1' ? '/waiterDetail' : '/waiterDetail'
      this.$router.push({
        path: url,
        query: {
          id: data.id
        }
      })
    },
    cellPhone () {
      window.location.href = `tel:${this.dataInfo.phone}`
    },
    onLoad () {
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1)
        }
        this.loading = false
        if (this.list.length >= 10) {
          this.finished = true
        }
      }, 1000)
    }
  },
  mounted () {
    this.id = this.$route.query.id
    if (this.$refs.detalBox.clientHeight > 300) {
      this.showMore = true
      this.isShowAll = false
    }
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #f8f8f8;
    min-height: 100%;
    position: relative;
    .headImg{
      width: 100%;
      height: 160px;
      object-fit: contain;
      margin-bottom: 6px;
    }
    .base-info-box{
      background-color: #FFFFFF;
      width: 300px;
      margin-left: 10px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 6px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
      .base-out{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        span:first-child{
          color: #999999;
        }
        span:last-child{
          flex: 1;
        }
      }
      .detail-head{
        position: relative;
        margin-bottom: 10px;
        div{
          position: absolute;
          background-color: #1989fa;
          width: 30px;
          bottom: 2px;
          left: 9px;
          box-shadow: 0 0 1px 1px #1989fa;
        }
        span{
          position: relative;
          z-index: 1;
        }
      }
      .detail-box{
        line-height: 1.4;
        overflow: hidden;
        position: relative;
        .show-more{
          position: absolute;
          bottom: 0;
          background-color: #FFFFFF;
          height: 30px;
          left: 0;
          width: 100%;
          text-align: center;
          color: #1989fa;
          line-height: 30px;
          span{
            padding-right: 6px;
          }
        }
      }
    }
    .base-info-box2{
      width: 300px;
      margin-left: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      div{
        width: calc(50% - 5px);
        text-align: center;
        height: 30px;
        border: 1px solid #1989fa;
        line-height: 30px;
        border-radius: 5px;
        background-color: #FFFFFF;
        span{
          padding-left: 4px;
        }
      }
    }
    .tab-box{
      padding-top: 14px;
    }
    /deep/ .van-tabs--line .van-tabs__wrap{
      height: auto;
    }
    /deep/ .van-tabs__line{
      bottom: 8px;
    }
    .item-list-box{
      box-sizing: border-box;
      padding: 0 10px 10px;
      .list-item-box2{
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px #eeeeee;
        .list-head-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          padding-bottom: 6px;
          height: 70px;
          .list-name-box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            height: 100%;
            width: calc(100% - 80px);
            .list-zz{
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              span{
                margin-top: 2px;
                padding: 2px 6px;
                font-size: 10px;
                margin-right: 10px;
                border-radius: 4px;
              }
            }
            .list-name{
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: 100%;
            }
            .list-name1{
              color: #AAAAAA;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: 100%;
            }
          }
          img{
            width: 70px;
            height: 70px;
            margin-right: 10px;
          }
        }
        .list-addr-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          color: #999999;
          .value-text{
            color: #1989fa;
          }
        }
      }
      .list-item-box3{
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px #eeeeee;
        .list-head-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          height: 60px;
          .list-name-box{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            height: 100%;
            width: calc(100% - 70px);
            .list-name{
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              white-space: nowrap;
              width: 100%;
            }
            .list-money-box{
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              font-size: 10px;
              .money-text{
                font-size: 12px;
              }
              .yy-btn{
                color: #FFFFFF;
                padding: 2px 10px;
                height: 16px;
                line-height: 16px;
                border-radius: 10px;
                background-color: #1989fa;
              }
            }
          }
          img{
            width: 60px;
            height: 60px;
            margin-right: 10px;
          }
        }
      }
      .pj-outbox{
        background-color: #FFFFFF;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px;
        .pj-type-box{
          padding: 6px 0 16px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          span{
            background-color: #f8f8f8;
            font-size: 10px;
            margin: 0 10px 10px 0;
            padding: 2px 10px;
            border-radius: 20px;
          }
        }
        .pj-list-box{
          .list-item-box1{
            margin-bottom: 10px;
            border-radius: 5px;
            border-bottom: 1px solid #eeeeee;
            box-sizing: border-box;
            padding: 4px 4px 10px;
            .list-head-box{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 6px;
              height: 36px;
              .list-name-box{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                height: 100%;
                width: calc(100% - 46px - 90px);
                .list-name{
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-all;
                  white-space: nowrap;
                  width: 100%;
                }
                .list-type{
                  font-size: 10px;
                  color: #999999;
                }
              }
              img{
                width: 36px;
                height: 36px;
                margin-right: 10px;
                border-radius: 50%;
              }
              /deep/ .van-rate__icon{
                font-size: 14px;
              }
            }
            .list-addr-box{
              color: #999999;
              width: 100%;
            }
          }
        }
      }
    }
  }
  .bottom-10{
    padding-bottom: 10px;
  }
</style>
